<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="images/ico.png" >
    <title>专栏</title>
    <style>
        /* body{
            width: 100%;
            height: 100%;
            background-image: url(https://static.zhihu.com/heifetz/assets/patterns.c72a480c.png);
            background-repeat: repeat-x;
        } */
        .colom_top{
            width: 100%;
            height: 470px;
            position: relative;
            background: url(https://static.zhihu.com/heifetz/assets/patterns.c72a480c.png) 50% no-repeat;
            
        }
        .inner{
            width: 120px;
            height: 120px;
            border: 3px solid black;
            position: relative;
            left: 50%;
            margin-left: -80px;
            top: 160px;
            font-size: 40px;
            text-align: center;

        }
        .toper{
            width: 100%;
            height: 50px;
            position: fixed;
        }
        .name{
            width: 100px;
            height: 50px;
            margin-left: 300px;
            font-size: 30px;
            color: blue;
            position: absolute;
            float: left;
            top: 2px;
        }
        .write{
            width: 100px;
            height: 30px;
            border: 1px solid blue;
            float: right;
            border-radius: 5%;
            color: blue;
            text-align: center;
            line-height: 40px;
            font-size: 15px;
            font-family: 宋体;
            position: absolute;
            right: 400px;
            top: 8px;
            /* background-color: white; */
        }
        #elses{
            float: right;
            width: 50px;
            height: 50px;
            position: absolute;
            right: 300px;
            font-size: 30px;
        }
        span:hover{
            background-color: black;
        }
        .content{
            position: relative;
            top: 45%;
            /* left: 50%; */
            margin-left: 650px;
            font-family: 微软雅黑;
            font-size: 25px;
        }
        .content>p{
            position: relative;
            left: 50%;
            margin-left: -450px;
        }
        .content>input{
            position: relative;
            left: 50%;
            margin-left: -400px;
        }
        .search{
            width: 1200px;
            height: 800px;
            margin-top: 30px;
            background-color: rgb(251, 252, 252);
            position: relative;
            left: 50%;
            margin-left: -600px;
        }
        .colom_discover{
            width: 200px;
            height: 280px;
            float: left;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            align-items: center;
            background-color: white;
            box-shadow: 5px 5px 3px rgb(245, 246, 246);
            margin: 20px;
            margin-left: 50px;
            position: relative;
        }
        .head_portrait{
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            border-radius: 50%;
            margin-top: 20px;}
            p{
                margin: 10px;
            }
    </style>
</head>
<body>
    <div class="toper">
        <div class="name">知遇</div>
        <div id="elses">...</div>
        <div class="write">
            <svg t="1597800044814" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6399" width="20" height="20"><path d="M51.8 896.1c0 22.6 18.3 41 41 41h738.3c22.6 0 41-18.3 41-41 0-22.6-18.3-41-41-41H92.8c-22.7 0-41 18.4-41 41zM51.8 155.2c0 22.6 18.3 41 41 41h668.1c22.6 0 41-18.3 41-41 0-22.6-18.3-41-41-41H92.8c-22.7 0-41 18.4-41 41zM388.9 737.2c19.5 19.5 51.2 19.5 70.7 0l509.3-509.3c19.5-19.5 19.5-51.2 0-70.7s-51.2-19.5-70.7 0L388.9 666.4c-19.6 19.6-19.6 51.2 0 70.8z" fill="#242424" p-id="6400"></path><path d="M832.4 935.7c22.6 0 41-18.3 41-41V531c0-22.6-18.3-41-41-41-22.6 0-41 18.3-41 41v363.8c0 22.6 18.3 40.9 41 40.9zM91.5 935.7c22.6 0 41-18.3 41-41V156.5c0-22.6-18.3-41-41-41-22.6 0-41 18.3-41 41v738.3c0 22.6 18.3 40.9 41 40.9z" fill="#242424" p-id="6401"></path></svg>
            <span style="position: relative; top: -4px;">写文章</span></div>
    </div>
    <div class="colom_top">
        <div class="inner">知遇
            专栏</div>
            <div class="content">
                <p>随心写作，自由表达</p>
                <input style="width: 150px; height: 50px;" type="button" value="开始写文章" >
            </div>
    </div>
    
    <!-- 专栏发现 -->
    <div class="search">
        <p style="text-align: center; font-size: 20px; font-family: 黑体;">专栏·发现</p>
        <div class="colom_discover">
            <img class="head_portrait" src="https://pic4.zhimg.com/v2-7b4d540a7e5230f7a8b28e9e7e4f158b_xs.jpg">
            <p style="font-family: 黑体; font-weight: bold;">扑克投资家</p>
            <p>专业垂直社区平台，覆盖大宗商品、金融市场全领域。</p>
            <p>23,600人关注|73篇文章</p>
            <p><input type="button" value="进入专栏" name="" id=""></p>
        </div>
        <!-- 2 -->
        <div class="colom_discover">
            <img class="head_portrait" src="https://pic4.zhimg.com/v2-1a45fa994b5a713b0e9a7e6f33d56e6b_xs.jpg">
            <p style="font-family: 黑体; font-weight: bold;">碱基矿工</p>
            <p>探索生命科学的技术，生信圈教科书式必读公众号</p>
            <p>23,600人关注|73篇文章</p>
            <p><input type="button" value="进入专栏" name="" id=""></p>
        </div>

        <div class="colom_discover">
            <img class="head_portrait" src="https://pic4.zhimg.com/v2-74be3caf46b2bd2648f3bb0c20a59926_xs.jpg">
            <p style="font-family: 黑体; font-weight: bold;">陈西设计之家</p>
            <p>无设计 ‖ 不生活【公众号:陈西设计之家】</p>
            <p>23,600人关注|73篇文章</p>
            <p><input type="button" value="进入专栏" name="" id=""></p>
        </div>


        <div class="colom_discover">
            <img class="head_portrait" src="https://pic4.zhimg.com/v2-c974454f8f054c67a0b938356b4142dc_xs.jpg">
            <p style="font-family: 黑体; font-weight: bold;">在职研究生</p>
            <p>十年树木 百年树人</p>
            <p>23,600人关注|73篇文章</p>
            <p><input type="button" value="进入专栏" name="" id=""></p>
        </div>

        
        <div class="colom_discover">
            <img class="head_portrait" src="https://pic4.zhimg.com/v2-7b4d540a7e5230f7a8b28e9e7e4f158b_xs.jpg">
            <p style="font-family: 黑体; font-weight: bold;">诡案：1981</p>
            <p>原创悬疑惊悚短篇+连载小说，公众号《绛衣》，求关注</p>
            <p>23,600人关注|73篇文章</p>
            <p><input type="button" value="进入专栏" name="" id=""></p>
        </div>
    </div>
   
</body>
</html>